<template>
  <div class="content">
    <div class="search-content">
      <!-- 顶部搜索框 -->
      <a-form :model="formState" :labelCol="{ span: 6 }" @submit="onSubmit">
        <a-row>
          <a-col :span='5'>
            <a-form-item label="MO号">
              <a-input v-model:value="formState.moU9No" placeholder="请输入MO号" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="PO号">
              <a-input v-model:value="formState.poNo" placeholder="请输入PO号" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <a-form-item label="班组编号">
              <a-input v-model:value="formState.eqptCode" placeholder="请输入班组编号" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <a-form-item label="物料编码">
              <a-input v-model:value="formState.partCode" placeholder="请输入物料编码" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <a-form-item label="物料名称">
              <a-input v-model:value="formState.partCode" placeholder="请输入物料名称" allow-clear/>
            </a-form-item>
          </a-col>
        <!-- </a-row> -->
        <!-- <a-row> -->
          <a-col :span='5'>
            <a-form-item label="开工时间">
              <a-range-picker v-model:value="formState.u9StartTime" show-time value-format="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <div style="display:flex;justify-content: center;align-items: center;">
              <a-button type="primary" html-type="submit">查询</a-button>
              <a-button type="primary" style="margin-left:10px;">修改</a-button>
              <a-button type="primary" style="margin-left:10px;">重新发布</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="content-box">
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="排产计划">
          <planningSchedulingTable ref="planningSchedulingTableRef" :searchParams="formState"/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="甘特图">
          <assemblyPlanGantt ref="assemblyPlanGanttRef" :searchParams="formState"/>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
  <!-- 工作中心 -->
  <workCenterListSelectModel @register="workCenterModal" @getSelectResult="workCenterHandleSuccess"></workCenterListSelectModel>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import workCenterListSelectModel from '/@/views/components/workCenterListSelectModel.vue';
  import { useModal } from '/@/components/Modal';
  import planningSchedulingTable from './components/planningSchedulingTable.vue';
  import assemblyPlanGantt from '/@/views/components/assemblyPlanGantt.vue';
  // 定义子组件实例
  const planningSchedulingTableRef = ref(null);
  const assemblyPlanGanttRef = ref(null);
  const emit = defineEmits(['updateSerach']);
  const formState = reactive({
    moU9No:'',
    poNo: '',
    eqptCode: '',
    partCode: '',
    u9StartTime: []
  });
  const activeKey = ref('1');
  // 注册工作中心筛选框
  const [workCenterModal, { openModal: openWorkCenterModal }] = useModal();
  //打开选择工作中心
  function workCenterModalOpen(props) {
    openWorkCenterModal(true);
  }
  //工作中心回写
  function workCenterHandleSuccess(val, values) {
    formState.workCenterName = val[0].label;
  }
  function onSubmit() {
    // 调用子组件暴露的方法
    if(activeKey.value == 1)  planningSchedulingTableRef.value.getList();
    else assemblyPlanGanttRef.value.getList();
  }
</script>

<style lang="less" scoped>
  .content {
    margin: 20px 10px;
    padding: 20px 10px;
    background-color: #fff;
    .content-box {
      // height: 62vh;
    }
  }
</style>
